<script setup>
import { reactive, ref } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['closed', 'confirm'])

const form = reactive({
  name: '',
  remark: '',
})

const formRef = ref()

const rules = {
  name: [{ required: true, message: '请输入视角名称', trigger: 'blur' }],
}

const handleOpen = () => {}

const handleClosed = () => {
  emit('closed')
}

const handleCancel = () => {
  emit('closed')
}

const handleConfirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit('confirm', form)
    }
  })
  // emit('confirm', form)
}

const inputData = (data) => {
  Object.assign(form, data)
}

defineExpose({
  inputData,
})
</script>

<template>
  <el-dialog
    title="新增维度"
    :visible="visible"
    width="40%"
    @open="handleOpen"
    @close="handleClosed"
    class="add-view-dialog"
  >
    <el-form ref="formRef" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="视角名称" prop="name">
        <el-input type="text" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="视角描述" prop="remark">
        <el-input type="text" v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
